<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车结算</title>
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0.maximum-scale=1.0,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="shopping/css/reset.css">
    <link rel="stylesheet" href="shopping/css/index.css">
    <link rel="stylesheet" href="shopping/css/flexible.css">
    <link rel="stylesheet" href="css/vant.css">
    <script src="shopping/js/flexible.js"></script>
    <script src="js/vue/vue.js"></script>
    <script src="js/vue/axios.js"></script>
	<script src="js/vue/MD5.js"></script>
    <script src="js/vue/vant.js"></script>
    <script src="js/vue/qs.js"></script>
</head>
<body class="backgroundf8">
<div id="app" class="paddingbottom1">
    <div class="common clearfix height38 title_back">
        <a href="#" class="lf color0 shopping_left postion"  @click="back">
            <img class="shopping_left_img" src="shopping/images/baileft.png">
            <span class="back">返回</span>
        </a>
        购物车结算
    </div>
   <template>
        <div class="shoppingCart_title">
            <span>商品列表</span>
            <span class="color3c">共</span>
            <span class="color3c">{{toatlShop}}</span>
            <span class="color3c">件宝贝</span>
            <span class="rf" @click="del"><img src="shopping/images/delect.png"></span>
        </div>
   </template>
    <div v-if="dataList.length>0">
        <template>
            <div class="order_message clearfix Settlement" style="padding-top:0.2rem;" v-for="(item,index) in dataList">
                <div class="delect_img" :class="{active:item.isCheak==0}" @click="currIndexs(index)"></div>
                <div class="right_shopping_message">
                    <div class="left_order">
                        <img :src="item.Picurl">
                    </div>
                    <div class="right_order">
                        <p class="order_title">{{item.Goodsname}}</p>
                        <!-- <p class="sales">
                            <span>颜色：</span><span class="marginright10">粉色</span>
                            <span>尺码：</span><span class="marginright10">L</span>
                        </p> -->
                        <p class="bottom_content">
                            <span class="price_Icon colors">￥</span><span class="details_price colors unitPrice">{{item.Price}}</span>
                            <span class="rf add_order">
                                <span @click="reduce(item.id)" class="reduce">
                                    <img v-if="item.Num>1" src="shopping/images/reduce2.png" />
                                    <img v-else src="shopping/images/reduce3.png" />
                                </span>
                                <span class="numbers">{{item.Num}}</span>
                                <span @click="addNumber(item.id)" class="addNumber">
                                    <img src="shopping/images/add1.png" />
                                </span>
                            </span>
                        </p>
                    </div>
                </div>
            </div>
        </template>
    </div>
    <div class="notDate" v-else style="text-align: center;margin-top:60px;">
        <img src="images/shopNot.png"/>
    </div>
    <div class="footer_money">
        <div class="lf padding10">
            <span class="select_img" :class="{select_img_active:currIndex=='0'}" @click="allSelect">
            </span>全选</div>
        <span class="rf padding10 settlement_money" @click="Settlement">结算(<span>{{totalNum}}</span>)</span>
        <p class="rf padding10">
            <span>合计：</span>
            <span class="price_Icon">￥</span><span class="details_price">{{totalPrice}}</span>
        </p>
    </div>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        gid:'',
        dataList:[],
        isHide:false,
        msgM:'添加成功',
        toatlShop:'0',
        totalNum:'',
        totalPrice:'',
        currIndex:'1',
        isAllSelect:'0'
    },
    created(){
        this.setCanS()
    },
    methods:{
            //设置参数
        setCanS(){
            let Request = new Object()
            Request = GetRequest()
            this.gid = Request['gid']
            this.getlists()
        },
        getlists(){
            this.vids=sessionStorage.getItem('Vid')
            getVs()
            axios.get('/mobileapi/member/goods.php?act=cart_list').then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code !== 200) {
                        _this.$message({
                            message: msg,
                            type: 'error'
                        });
                    } else {
                        //window.vant.Toast.clear();
                        data=data.data.data
                        if(data.length>0){
                            this.dataList=data
                            this.toatlShop=data.length
                            for(let i in this.dataList){
                                if(i==0){
                                    Vue.set(this.dataList[i],'isCheak','1');
                                }else{
                                    Vue.set(this.dataList[i],'isCheak','1');
                                }
                            }
                            //console.log(this.dataList)
                            // this.totalPrice=parseInt(this.dataList[0].Price)*parseInt(this.dataList[0].Num)
                            // this.totalNum=this.dataList[0].Num
                            this.totalPrice=0
                            this.totalNum=0
                            //判断是否是全选
                            let isAllCheak=0
                            let isAllCheaknot=0
                            for(let i in this.dataList){
                                if(this.dataList[i].isCheak=='0'){
                                    isAllCheak++
                                }
                            }
                            if(isAllCheak==this.dataList.length){
                                this.currIndex='1'
                                this.allSelect()
                            }
                        }else{
                            this.dataList=[]
                            this.totalPrice=0
                            this.totalNum=0
                        }
                    }
                }).catch(function (error) {
                console.log(error); 
            })
        },
        addShopping(id){
            //console.log(this.vids)
            const params={
                gid:id
            }
            getVs()
            axios.get('/mobileapi/member/goods.php?act=add_goodscard',{params:params}).then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code !== 200) {
                        this.isHide=true
                        this.msgM="添加失败"
                        this.timers=setTimeout(this.hide, 2000)
                    } else {
                        this.isHide=true
                        this.msgM="添加成功"
                        this.timer=setTimeout(this.hide, 2000)
                    }
                }).catch(function (error) {
                console.log(error); 
            })
        },
        hide(){
            this.isHide=false
        },
        reduce(id){
            //console.log(this.vids)
            const params={
                id:id,
                type:'1'
            }
            getVs()
            axios.get('/mobileapi/member/goods.php?act=char_add',{params:params}).then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code !== 200) {
                        this.isHide=true
                        this.msgM="添加失败"
                        this.timers=setTimeout(this.hide, 2000)
                    } else {
                        for(let i in this.dataList){
                            if(this.dataList[i].id==id&&this.dataList[i].Num>1){
                                this.dataList[i].Num--
                            }
                        }
                        this.alltotal()
                    }
                }).catch(function (error) {
                console.log(error); 
            })
        },
        addNumber(id){
            //console.log(this.vids)
            const params={
                id:id,
                type:'0'
            }
            getVs()
            axios.get('/mobileapi/member/goods.php?act=char_add',{params:params}).then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code !== 200) {
                      
                    } else {
                        for(let i in this.dataList){
                            if(this.dataList[i].id==id){
                                this.dataList[i].Num++
                            }
                        }
                        this.alltotal()
                    }
                }).catch(function (error) {
                console.log(error); 
            })
        },
        //购物车商品删除
        del(){
            let id=[]
            for(let i in this.dataList){
                if(this.dataList[i].isCheak=='0'){
                    id.push(this.dataList[i].id)
                }
            }
            id=id.join(",")
            const params={
                id:id
            }
            console.log(id)
            getVs()
            axios.post('/mobileapi/member/goods.php?act=char_del',Qs.stringify(params)).then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code !== 200) {
                        window.vant.Toast('删除失败')
                    } else {
                        window.vant.Toast('删除成功')
                        this.getlists()
                    }
                }).catch(function (error) {
                console.log(error); 
            })
        },
        //选中
        currIndexs(index){
            if(this.dataList[index].isCheak=='0'){
                this.dataList[index].isCheak='1'
                this.alltotal()
            }else{
                this.dataList[index].isCheak='0'
                this.alltotal()
            }
             //判断是否是全选
             let isAllCheak=0
             let isAllCheaknot=0
            for(let i in this.dataList){
                if(this.dataList[i].isCheak=='0'){
                    isAllCheak++
                }
                if(this.dataList[i].isCheak=='1'){
                    isAllCheaknot++
                }
            }
            if(isAllCheak==this.dataList.length){
                this.currIndex='1'
                this.allSelect()
            }
            if(isAllCheaknot==this.dataList.length){
                this.currIndex='0'
                this.allSelect()
            }
        },
        //全选或取消
        allSelect(){
            //取消全选
            if(this.currIndex=='0'){
                this.currIndex='1'
                this.totalPrice='0'
                this.totalNum='0'
                for(let i in this.dataList){
                    this.dataList[i].isCheak='1'
                }
            }else{
                this.currIndex='0'
                let totalPrice=0
                let totalNum=0
                for(let i in this.dataList){
                    this.dataList[i].isCheak='0'
                    totalPrice += parseFloat(this.dataList[i].Price)*parseInt(this.dataList[i].Num)
                    totalNum+=parseInt(this.dataList[i].Num)
                   
                }
               this.totalPrice=totalPrice
               this.totalNum=totalNum
            }
        },
        //计算总价
        alltotal(){
            let totalPrice=0
            let totalNum=0
            //let totalSumAll = 0;
            for(let i in this.dataList){
                if(this.dataList[i].isCheak=='0'){
                    totalPrice+=parseFloat(this.dataList[i].Price)*parseInt(this.dataList[i].Num)
                    totalNum+=parseInt(this.dataList[i].Num)
                }
            }
            this.totalPrice=totalPrice
            this.totalNum=totalNum
        },
        back(){
            window.location.href='shopindex.html'
        },
        //结算
        Settlement(){
            let id=[]
            for(let i in this.dataList){
                if(this.dataList[i].isCheak=='0'){
                    id.push(this.dataList[i].id)
                }
            }
            id=id.join(",")
            window.location.href='confirm_order.html?id='+id+''
        }
    }
})
</script>
</html>